<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.id"
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-input
          v-model="filter.name"
          placeholder="名称"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-input
          v-model="filter.company"
          placeholder="实习单位"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-button type="primary" style="margin-left: 10px" @click="handleSearch">
          <el-icon><search /></el-icon>搜索
        </el-button>
        <el-button style="margin-left: 10px" @click="handleReset">
          <el-icon><refresh /></el-icon>重置
        </el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        stripe
        border
      >
        <el-table-column prop="id" label="编号" width="80" align="center" />
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="requirement" label="申请要求" width="120" />
        <el-table-column prop="start_time" label="开始时间" width="120" />
        <el-table-column prop="end_time" label="结束时间" width="120" />
        <el-table-column prop="company" label="实习单位" width="150" />
        <el-table-column prop="status" label="审核状态" width="120" align="center">
          <template #default="scope">
            <el-tag
              :type="getStatusTagType(scope.row.status)"
              size="small"
              effect="dark"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
              <el-icon><edit /></el-icon>修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页信息 -->
      <div class="pagination-info">
        第1到{{ filteredData.length }}条，共{{ filteredData.length }}条记录。
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="`编辑实习信息 - ${editForm.name}`"
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form
        :model="editForm"
        :rules="formRules"
        ref="formRef"
        label-width="100px"
      >
        <el-form-item label="编号" prop="id">
          <el-input v-model="editForm.id" disabled />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入实习名称" />
        </el-form-item>
        <el-form-item label="申请要求" prop="requirement">
          <el-input
            v-model="editForm.requirement"
            placeholder="请输入申请要求"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
        <el-form-item label="开始时间" prop="start_time">
          <el-date-picker
            v-model="editForm.start_time"
            type="date"
            placeholder="选择开始日期"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="end_time">
          <el-date-picker
            v-model="editForm.end_time"
            type="date"
            placeholder="选择结束日期"
            value-format="YYYY-MM-DD"
            style="width: 100%"
            :disabled-date="disabledEndDate"
          />
        </el-form-item>
        <el-form-item label="实习单位" prop="company">
          <el-input v-model="editForm.company" placeholder="请输入实习单位" />
        </el-form-item>
        <el-form-item label="审核状态">
          <el-tag :type="getStatusTagType(editForm.status)" size="medium" effect="dark">
            {{ editForm.status }}
          </el-tag>
          <span style="margin-left: 10px; color: #909399">(不可修改)</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search,
  Refresh,
  Edit
} from '@element-plus/icons-vue'

// 数据状态
const filter = ref({
  id: '',
  name: '',
  company: ''
})

const tableData = ref([
  {
    id: 13,
    name: '顶岗实习',
    requirement: '无挂科',
    start_time: '2020-06-03',
    end_time: '2020-10-15',
    company: '360',
    status: '通过'
  },
  {
    id: 14,
    name: '顶岗实习',
    requirement: '无挂科',
    start_time: '2020-06-29',
    end_time: '2020-10-22',
    company: '1',
    status: '通过'
  },
  {
    id: 15,
    name: '顶岗实习',
    requirement: '无挂科',
    start_time: '2021-12-01',
    end_time: '2023-02-01',
    company: '北京某公司',
    status: '待审核'
  }
])

const originalData = ref([])
const dialogVisible = ref(false)
const formRef = ref(null)

const editForm = ref({
  id: '',
  name: '',
  requirement: '',
  start_time: '',
  end_time: '',
  company: '',
  status: ''
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入实习名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
  ],
  requirement: [
    { required: true, message: '请输入申请要求', trigger: 'blur' }
  ],
  start_time: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  end_time: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ],
  company: [
    { required: true, message: '请输入实习单位', trigger: 'blur' }
  ]
}

// 计算属性
const filteredData = computed(() => {
  return tableData.value.filter(item => {
    const idMatch = filter.value.id ? item.id.toString().includes(filter.value.id) : true
    const nameMatch = filter.value.name ? item.name.includes(filter.value.name) : true
    const companyMatch = filter.value.company ? item.company.includes(filter.value.company) : true
    return idMatch && nameMatch && companyMatch
  })
})

// 生命周期钩子
onMounted(() => {
  originalData.value = JSON.parse(JSON.stringify(tableData.value))
})

// 方法
const getStatusTagType = (status) => {
  switch (status) {
    case '通过': return 'success'
    case '待审核': return 'warning'
    default: return 'danger'
  }
}

const disabledEndDate = (time) => {
  return time.getTime() < new Date(editForm.value.start_time).getTime()
}

const handleSearch = () => {
  ElMessage.success('搜索完成')
}

const handleReset = () => {
  filter.value = {
    id: '',
    name: '',
    company: ''
  }
  tableData.value = JSON.parse(JSON.stringify(originalData.value))
  ElMessage.success('已重置')
}

const handleEdit = (row) => {
  editForm.value = JSON.parse(JSON.stringify(row))
  dialogVisible.value = true
}

const handleDialogClosed = () => {
  formRef.value?.resetFields()
}

const handleSave = async () => {
  try {
    await formRef.value.validate()
    
    const index = tableData.value.findIndex(item => item.id === editForm.value.id)
    if (index !== -1) {
      tableData.value[index] = { ...editForm.value }
      ElMessage.success('修改成功')
      dialogVisible.value = false
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped>
.internship-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-item {
  margin-left: 10px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}

.pagination-info {
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}

.el-button [class*="el-icon-"] {
  margin-right: 5px;
}

.el-table {
  margin-top: 20px;
}

.el-tag {
  font-weight: bold;
}
</style>